<div class="login-container">
  <p class="rent-head" (click)="cancel()">租房系统</p>
  <form nz-form [formGroup]="validateForm" (ngSubmit)="submitForm()" class="login-form">
    <h1 class="login-title">租房系统登录</h1>
    <nz-form-item>
      <nz-form-control [nzSpan]="20" [nzOffset]="2" nzErrorTip="请输入用户名!">
        <nz-input-group nzPrefixIcon="user">
          <input type="text" nz-input formControlName="userName" placeholder="用户名/qq/email/phone" />
        </nz-input-group>
      </nz-form-control>
    </nz-form-item>
    <nz-form-item >
      <nz-form-control [nzSpan]="20" [nzOffset]="2" nzErrorTip="请输入密码!">
        <nz-input-group nzPrefixIcon="lock">
          <input type="password" nz-input formControlName="password" placeholder="密码" />
        </nz-input-group>
      </nz-form-control>
    </nz-form-item>
    <button nz-button class="btn-normol-middle login-normol" [nzType]="'primary'">登录</button>
    <div nz-row>
      <span nz-col [nzSpan]="15" [nzOffset]="2">
        <a class="font-normol" (click)="updatePwdModal=true">忘记密码</a>
      </span>
      <span nz-col [nzSpan]="4" [nzOffset]="2">
        <a class="font-normol" (click)="register()">注册</a>
      </span>
    </div>
  </form>
  <nz-modal
  [(nzVisible)]="updatePwdModal"
  nzTitle="忘记密码"
  nzCentered
  (nzOnCancel)="handleCancel()"
  (nzOnOk)="handleOk()"
  (nzOnClose)="handleClose()"
>
  <ng-container *nzModalContent>
    <form nz-form>
      <nz-form-item>
        <nz-form-label nzSpan="4" nzRequired>手机号码</nz-form-label>
        <nz-form-control nzSpan="14">
          <input nz-input type="text" [(ngModel)]="phone" name="phone" required>
        </nz-form-control>
      </nz-form-item>
      <nz-form-item>
        <nz-form-label [nzSpan]="4" nzRequired>
          验证码
        </nz-form-label>
        <nz-form-control
          [nzSpan]="14"
        >
          <div nz-row [nzGutter]="6">
            <div nz-col [nzSpan]="12">
              <input type="text" nz-input [(ngModel)]="code" name="code" />
            </div>
            <div nz-col [nzSpan]="10">
              <button nz-button nzTy="primary" (click)="getCaptcha()" *ngIf="showCodeBtn">验证码</button>
              <button class="btn-normol btn-disabled" disabled *ngIf="!showCodeBtn">{{codeCount}}</button>
            </div>
          </div>
        </nz-form-control>
      </nz-form-item>
      <nz-form-item>
        <nz-form-label nzSpan="4" nzRequired>新密码</nz-form-label>
        <nz-form-control nzSpan="14">
          <input nz-input type="password" [(ngModel)]="newPwd" name="newPwd" required>
        </nz-form-control>
      </nz-form-item>
      <nz-form-item>
        <nz-form-label nzSpan="4" nzRequired>确认密码</nz-form-label>
        <nz-form-control nzSpan="14">
          <input nz-input type="password" [(ngModel)]="newPwdConfire" name="newPwdConfire" required>
        </nz-form-control>
      </nz-form-item>
    </form>
  </ng-container>
</nz-modal>
</div>
